import React, { Component } from 'react';
import { TabBar ,Toast,Modal} from 'antd-mobile';
import PropTypes from 'prop-types';
import client from 'UTIL/native'
import './index.less'
const alert = Modal.alert;


export default class FootTabBar extends Component {
  static contextTypes = {
       router: PropTypes.routerShape
  };
  constructor(props) {
    super(props);
    client();
		
    this.state = {
      selectedTab: '',
      fullScreen: true,
      height:'',
      url:sessionStorage.getItem('url') || 'go.png'
    };

  }
  componentWillMount() {
    let height = $(window).height()*0.9;
    var _this = this;
    this.setState({
      selectedTab: this.props.selectedTab,
      height:height
    })
    window.changeStateForGoButton = function(parrams) {
      if(parrams){
        //parrams = JSON.stringify(parrams);
        if(parrams.isSuccess == "1" ){
          sessionStorage.setItem('url','go-1.png')
          _this.setState({
            url:'go-1.png'
          })
        }else{
          sessionStorage.setItem('url','go.png')
          _this.setState({
            url:'go.png'
          })
        }
      }
    }
  }

  render() {
    let{url} = this.state;

    let{height} = this.state;
    let top=height==0?null:height+'px';


    let item = TabBar.item;


    return (
      <div className='footBar' style={{ position: 'fixed', height: '10%', width: '100%', top:top}}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <item
            title="首页"
            key="首页"
            icon={<div style={{
              width: '.4rem',
              height: '.4rem',
              background: 'url(./imgs/home.png) center center /  .4rem .4rem no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '.4rem',
              height: '.4rem',
              background: 'url(./imgs/home-1.png) center center /  .4rem .4rem no-repeat' }}
            />}
            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab'
              },()=>{
                this.context.router.push({
                  pathname: '/Home'
                })
              });
            }}
            data-seed="logId"
          >
          </item>
					<item
            title="贷款"
            key="贷款"
            icon={<div style={{
              width: '.6rem',
              height: '.6rem',
              background: 'url(./imgs/loansNot.png) center center /  .6rem .6rem no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '.6rem',
              height: '.6rem',
              background: 'url(./imgs/loansNot.png) center center /  .6rem .6rem no-repeat' }}
            />}
            selected={this.state.selectedTab === 'rrrTab'}
            onPress={() => {
              return false;
            }}
            data-seed="logId"
          >
          </item>
          
          <item
            title="社区"
            key="社区"
            icon={<div style={{
              width: '.4rem',
              height: '.4rem',
              background: 'url(./imgs/communityNot.png) center center /  .4rem .4rem no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '.4rem',
              height: '.4rem',
              background: 'url(./imgs/community.png) center center /  .4rem .4rem no-repeat' }}
            />}
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab'
              },()=>{
              	//跳第三方页面
              	//http://wepay.test.bankcomm.com/services/houseapp/live/#/reside

									native.call({
									   	'fun':'newPage',
									   	'param':{
									   		'url':'http://wepay.test.bankcomm.com/services/houseapp/live/#/reside',
									   		'title': '',
									   		'menuCode':'menuCode'
									   	}
					
									})
								}
              )  

            }}
            data-seed="logId"
          >
          </item>
          
          <item
            icon={
              <div style={{
                width: '.4rem',
                height: '.4rem',
                background: 'url(./imgs/mine.png) center center /  .4rem .4rem no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '.4rem',
                height: '.4rem',
                background: 'url(./imgs/mine-1.png) center center /  .4rem .4rem no-repeat' }}
              />
            }
            title="我的"
            key="我的"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
            	let _this = this;
              this.setState({
                selectedTab: 'yellowTab'
              },()=>{
              	
              	//判断有无登录
              	let isLogIn = localStorage.getItem('isLogIn');
								if(isLogIn == 'false'){
									//Toast.info('请先登录')
									native.call({
						        'fun':'logIn',
						        'callBack':function(backData){
						         if(backData.isLogInSuccess == '1'){
						            localStorage.setItem('isLogIn','true');
						            _this.context.router.push({
				                  pathname: '/My'
				                })
						          }else{
						          	localStorage.setItem('isLogIn','false');
						          	_this.context.router.push({
				                  pathname: '/Home'
				                })
						          }
						        }
						      })
								}else{
									this.context.router.push({
	                  pathname: '/My'
	                })
								}
              	
              	
                
               
              });
            }}
          >

          </item>
        </TabBar>
      </div>
    );
  }
}